<template>
  <div>son组件 - {{ msg }} - {{ msg2 }}</div>
</template>

<script>
import { ref, toRefs, onMounted } from "vue";
export default {
  props: {
    msg: String,
  },
  // 在setup里面如果想使用props的值，由于没有this，所以需要第一个参数props
  // 第一个参数props是不能直接结构的，它会消除响应式
  // 如果一定要解构的，需要在setup的里面，使用toRefs方法进行解构

  // 第二个参数context是一个对象，对象里面有attrs，emit，expose，slots
  // 第二个参数因为是普通对象，所以可以直接解构
  setup(props, { emit }) {
    const { msg } = toRefs(props);
    // console.log(context);

    onMounted(() => {
      setTimeout(() => {
        // context.emit("fn");
        emit("fn");
      }, 2000);
    });

    const msg2 = ref(msg);
    const fn = () => {
      console.log(msg);
    };
    return {
      msg2,
      fn,
    };
  },
};
</script>
